﻿<%@ Page Language="C#" MasterPageFile="~/Admin/BaseMaster/Pages.Master" AutoEventWireup="true" CodeBehind="HomeContent.aspx.cs" Inherits="Liu_Project.Web.Admin.Pages.Home.HomeContent" %>

<asp:Content ID="Content1" ContentPlaceHolderID="baseTitle" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="baseHead" runat="server">
    <style>
        .admin-backlog-body {
            display: block;
            padding: 10px 15px;
            background-color: #f8f8f8;
            color: #999;
            border-radius: 2px;
            transition: all .3s;
            -webkit-transition: all .3s
        }

        .admin-backlog-body h3 {
            padding-bottom: 10px;
            font-size: 12px
        }

        .admin-backlog-body p cite {
            font-style: normal;
            font-size: 30px;
            font-weight: 300;
            color: #009688
        }

        .admin-backlog-body:hover {
            background-color: #CFCFCF;
            color: #888
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="baseContent" runat="server">
    <div id="contentdiv" style="background-color: #fff">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <blockquote class="layui-elem-quote" style="display: flex;">
                            <div style="flex: 1; line-height: 30px;">欢迎：<span><%=CurrentUser.UserName %>！</span>当前时间：<span id="Timer"></span></div>
                            <div style="flex: 1;">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" id="pay">
                                    <i class="layui-icon">&#xe650;</i> 捐赠作者
                                </button>
                            </div>
                        </blockquote>
                        <fieldset class="layui-elem-field">
                            <legend>数据统计</legend>
                            <div class="layui-field-box">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-body">
                                            <div class="layui-carousel" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 90px;">
                                                <div style="background-color: #fff;">
                                                    <ul class="layui-row layui-col-space10 layui-this">
                                                        <li class="layui-col-xs3">
                                                            <a href="javascript:void(0);" data-id="User" data-title="用户" class="admin-backlog-body">
                                                                <h3>用户数</h3>
                                                                <p>
                                                                    <cite>0</cite>
                                                                </p>
                                                            </a>
                                                        </li>
                                                        <li class="layui-col-xs3">
                                                            <a href="javascript:void(0);" data-id="Role" data-title="角色" class="admin-backlog-body">
                                                                <h3>角色数</h3>
                                                                <p>
                                                                    <cite>0</cite>
                                                                </p>
                                                            </a>
                                                        </li>
                                                        <li class="layui-col-xs3">
                                                            <a href="javascript:void(0);" data-id="UserLog" data-title="操作日志" class="admin-backlog-body">
                                                                <h3>操作日志</h3>
                                                                <p>
                                                                    <cite id="LogCount">0</cite>
                                                                </p>
                                                            </a>
                                                        </li>
                                                        <li class="layui-col-xs3">
                                                            <a href="javascript:void(0);" data-id="UserLoginLog" data-title="登录日志" class="admin-backlog-body">
                                                                <h3>登录日志</h3>
                                                                <p>
                                                                    <cite id="LoginLogCount">0</cite>
                                                                </p>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <fieldset class="layui-elem-field">
                            <legend>数据概览</legend>
                            <div style="padding: 20px;">
                                <div id="echarts_login" style="width: 100%; height: 500px;"></div>
                            </div>
                        </fieldset>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="payImg" style="height: 450px; width: 600px; display: none;">
        <div style="width: 100%; height: 100%; display: inline-flex;">
            <img src="../../images/wxpay.jpg" style="max-width: 50%;" />
            <img src="../../images/zfbpay.jpg" style="max-width: 50%;" />
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="baseScript" runat="server">
    <script src="../../../javascripts/Scripts/echarts.min.js"></script>
    <script>
        !function () {
            var frameHeight = window.frameElement.scrollHeight - 40;
            $("#contentdiv").css("height", frameHeight + "px");

            top.layer.load(1);
            GetObjectInfoFunction_Async("Admin/Handler/HomeHand.ashx", { "act": "GetUserMessageList" }, function (result) {

                $('#LoginLogCount').text(result.data.LoginLogCount);
                $('#LogCount').text(result.data.LogCount);
            })

            $(".admin-backlog-body").click(function () {
                top.navTabSwitch($(this));
            })


            GetObjectInfoFunction_Async("Admin/Handler/HomeHand.ashx", { "act": "GetUserLoginList" }, function (result) {
                var xAxis_data = [];
                var susCount_data = [];
                var noSusCount_data = [];
                for (var i = 0; i < result.data.length; i++) {
                    var item = result.data[i];
                    xAxis_data.push(item.date.substring(5));
                    susCount_data.push(item.SusCount);
                    noSusCount_data.push(item.NoSusCount);
                }

                var option = {
                    title: {
                        text: '近七天登录次数'
                    },
                    color: ['#c23531', '#009688'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['失败次数', '成功次数']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            }, //区域缩放，区域缩放还原
                            dataView: {
                                readOnly: false
                            }, //数据视图
                            magicType: {
                                type: ['line', 'bar']
                            },  //切换为折线图，切换为柱状图
                            restore: {},  //还原
                            saveAsImage: {}   //保存为图片
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis_data
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '失败次数',
                        type: 'line',
                        //stack: '总量',
                        areaStyle: {},
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        data: noSusCount_data
                    }, {
                        name: '成功次数',
                        type: 'line',
                        //smooth: true,
                        areaStyle: {},
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        //注意stack---数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
                        //所以最后的解决方法是，，stack去掉，，或者stack给不同的值
                        //stack: '总量',
                        data: susCount_data
                    }]
                };

                //初始化echarts实例
                var myChart = echarts.init(document.getElementById('echarts_login'));
                //使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            })

            setInterval("GetTime()", 1000);

            //获取时间并设置格式
            function GetTime() {
                var mon, day, now, hour, min, sec;
                /*
                mon = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
                        "Sep", "Oct", "Nov", "Dec");
                mon = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
                    "九月", "十月", "十一月", "十二月");
                */
                /*
                day = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
                */
                day = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
                now = new Date();
                hour = now.getHours();
                min = now.getMinutes();
                sec = now.getSeconds();
                if (hour < 10) {
                    hour = "0" + hour;
                }
                if (min < 10) {
                    min = "0" + min;
                }
                if (sec < 10) {
                    sec = "0" + sec;
                }
                $("#Timer").html(
                    now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日" + "  " + hour + ":" + min + ":" + sec + "  " + day[now.getDay()]
                );
            }

            window.GetTime = GetTime;

            $("#pay").click(function () {
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: ['auto'],
                    skin: 'layui-layer-nobg',
                    shadeClose: true,
                    content: $('#payImg')
                });
            });
        }();
    </script>
</asp:Content>
